<style>
    .layui-table th {
        position: relative;
        padding: 5px 15px !important;
        min-height: 20px;
        line-height: 20px;
        font-size: 14px;
    }

    .layui-table td {
        position: relative;
        padding: 5px 15px !important;
        min-height: 20px;
        line-height: 20px;
        font-size: 14px;
    }

    .layui-input-my {
        height: 34px !important;
        line-height: 34px !important;
        border-width: 1px;
        border-style: solid;
        background-color: #fff;
        border-radius: 2px;
    }

    .special-label {
        float: left;
        display: block;
        padding: 9px 0 !important;
        width: 100px !important;
        font-weight: 400;
        line-height: 20px;
        text-align: right;
    }

    .layui-input-inline-my {
        width: 80% !important;
    }
</style>
<div class="layui-form" lay-filter="form-pdr-api">
    <script type="text/html" template lay-done="layui.data.sendParams(d.params)"></script>
    <fieldset class="layui-elem-field">
        <legend>接口基础信息</legend>
        <div class="layui-field-box">
            <div class="layui-form-item">
                <label class="layui-form-label">服务项目</label>
                <div class="layui-input-block">
                    <select name="pdrProjectId" id="pdrProjectId" lay-filter="pdrProjectId" lay-verify="required"
                            disabled>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">接口名称</label>
                <div class="layui-input-block">
                    <script type="text/html" template>
                        <input type="text" name="name" value="{{ d.params.name  || ''}}" autocomplete="off"
                               lay-verify="required" placeholder="请输入接口名称"
                               class="layui-input">
                    </script>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">接口描述</label>
                <div class="layui-input-block">
                    <script type="text/html" template>
                        <input type="text" name="description" value="{{ d.params.description  || ''}}"
                               autocomplete="off" lay-verify="required"
                               placeholder="请输入接口描述"
                               class="layui-input">
                    </script>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">请求类型</label>
                <div class="layui-input-block">
                    <select name="queryType" id="queryTypeEdit" lay-verify="required">
                        <option value="">请选择请求类型</option>
                        <option value="GET">GET</option>
                        <option value="PUT">PUT</option>
                        <option value="POST">POST</option>
                        <option value="DELETE">DELETE</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">请求路径</label>
                <div class="layui-input-block">
                    <script type="text/html" template>
                        <input type="text" name="path" value="{{ d.params.path  || ''}}" autocomplete="off"
                               lay-verify="required"
                               placeholder="请输入请求路径"
                               class="layui-input">
                    </script>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">接口状态</label>
                <div class="layui-input-block">
                    <script type="text/html" template>
                        <input type="radio" name="enable" value="1" title="启用" {{ (d.params.enable==1)?'checked':''}}>
                        <input type="radio" name="enable" value="0" title="禁用" {{ (d.params.enable==0)?'checked':''}}>
                    </script>
                </div>
            </div>

        </div>
    </fieldset>

    <fieldset class="layui-elem-field">
        <legend>出入参配置</legend>
        <div class="layui-field-box">
            <div class="layui-form-item layui-row">
                <div class="layui-col-md10">
                    <label class="layui-form-label">接口入参</label>
                    <div class="layui-input-inline layui-input-inline-my">
                        <script type="text/html" template>
                            <textarea id="inParam" name="inParam" placeholder="请输入接口入参(json格式)"
                                      class="layui-textarea"
                                      lay-verify="required" disabled>{{ d.params.inParam  || ''}}</textarea>
                        </script>
                    </div>
                </div>
                <div class="layui-col-md2">
                    <div class="layui-input-inline">
                        <button class="layui-btn layui-btn-normal completeIn">补充入参</button>
                    </div>
                </div>
            </div>

            <div class="layui-form-item layui-row">
                <div class="layui-col-md10">
                    <label class="layui-form-label">接口出参</label>
                    <div class="layui-input-inline layui-input-inline-my">
                        <script type="text/html" template>
                            <textarea id="outParam" name="outParam" placeholder="请输入接口出参(json格式)"
                                      class="layui-textarea "
                                      lay-verify="required" disabled>{{ d.params.outParam  || ''}}</textarea>
                        </script>
                    </div>
                </div>
                <div class="layui-col-md2">
                    <div class="layui-input-inline">
                        <button class="layui-btn layui-btn-normal completeOut">补充出参</button>
                    </div>
                </div>
            </div>
        </div>
    </fieldset>

    <fieldset class="layui-elem-field">
        <legend>限流配置</legend>
        <div class="layui-field-box">
            <div class="layui-form-item">
                <label class="layui-form-label">每秒请求数</label>
                <div class="layui-input-block">
                    <script type="text/html" template>
                        <input type="number" name="permitsPerSecond" value="{{ d.params.permitsPerSecond  || 1000}}"
                               placeholder="请输入每秒请求数"
                               class="layui-input"
                               min="0" max="100000" lay-verType="tips" lay-verify="number" lay-verify="required">
                    </script>
                </div>
            </div>
        </div>
    </fieldset>

    <fieldset class="layui-elem-field">
        <legend>防火墙配置</legend>
        <div class="layui-field-box">
            <div class="layui-form-item">
                <label class="layui-form-label">IP黑名单</label>
                <div class="layui-input-block">
                    <script type="text/html" template>
                        <textarea name="blackList" placeholder="请输入IP黑名单(使用逗号分隔)" class="layui-textarea">{{ d.params.blackList  || ''}}</textarea>
                    </script>
                </div>
            </div>
        </div>
    </fieldset>

<!--    <fieldset class="layui-elem-field">-->
<!--        <legend>熔断/降级配置</legend>-->
<!--        <div class="layui-field-box">-->
<!--            <div class="layui-form-item">-->
<!--                <div class="layui-inline">-->
<!--                    <label class="layui-form-label">groupKey</label>-->
<!--                    <div class="layui-input-inline">-->
<!--                        <script type="text/html" template>-->
<!--                            <input type="text" name="groupKey" value="{{ d.params.hystrixParam.groupKey  || ''}}"-->
<!--                                   autocomplete="off" lay-verify="required"-->
<!--                                   placeholder="请输入commandKey"-->
<!--                                   class="layui-input">-->
<!--                        </script>-->
<!--                    </div>-->
<!--                </div>-->

<!--                <div class="layui-inline">-->
<!--                    <label class="layui-form-label">commandKey</label>-->
<!--                    <div class="layui-input-inline">-->
<!--                        <script type="text/html" template>-->
<!--                            <input type="text" name="commandKey" value="{{ d.params.hystrixParam.commandKey  || ''}}"-->
<!--                                   autocomplete="off"-->
<!--                                   lay-verify="required"-->
<!--                                   placeholder="请输入commandKey"-->
<!--                                   class="layui-input">-->
<!--                        </script>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->

<!--            <div class="layui-form-item">-->
<!--                <div class="layui-inline">-->
<!--                    <label class="layui-form-label">重试间隔</label>-->
<!--                    <div class="layui-input-inline">-->
<!--                        <script type="text/html" template>-->
<!--                            <input type="number" name="sleepWindowInMilliseconds"-->
<!--                                   value="{{ d.params.hystrixParam.sleepWindowInMilliseconds  || ''}}"-->
<!--                                   placeholder="请输入休眠重试间隔"-->
<!--                                   class="layui-input"-->
<!--                                   min="0" max="100000" lay-verType="tips" lay-verify="number" lay-verify="required">-->
<!--                        </script>-->
<!--                    </div>-->
<!--                </div>-->

<!--                <div class="layui-inline">-->
<!--                    <label class="layui-form-label">超时时间</label>-->
<!--                    <div class="layui-input-inline">-->
<!--                        <script type="text/html" template>-->
<!--                            <input type="number" name="timeoutInMilliseconds"-->
<!--                                   value="{{ d.params.hystrixParam.timeoutInMilliseconds  || ''}}"-->
<!--                                   placeholder="请输入请求超时时间"-->
<!--                                   class="layui-input"-->
<!--                                   min="0" max="100000" lay-verType="tips" lay-verify="number" lay-verify="required">-->
<!--                        </script>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->

<!--            <div class="layui-form-item">-->
<!--                <div class="layui-inline">-->
<!--                    <label class="layui-form-label">最小请求数</label>-->
<!--                    <div class="layui-input-inline">-->
<!--                        <script type="text/html" template>-->
<!--                            <input type="number" name="requestVolumeThreshold"-->
<!--                                   value="{{ d.params.hystrixParam.requestVolumeThreshold  || ''}}"-->
<!--                                   placeholder="请输入短路最小请求数"-->
<!--                                   class="layui-input"-->
<!--                                   min="0" max="100000" lay-verType="tips" lay-verify="number" lay-verify="required">-->
<!--                        </script>-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="layui-inline">-->
<!--                    <label class="layui-form-label">失败百分比</label>-->
<!--                    <div class="layui-input-inline">-->
<!--                        <script type="text/html" template>-->
<!--                            <input type="number" name="errorThresholdPercentage"-->
<!--                                   value="{{ d.params.hystrixParam.errorThresholdPercentage  || ''}}"-->
<!--                                   placeholder="请输入失败百分比阈值"-->
<!--                                   class="layui-input"-->
<!--                                   min="0" max="100000" lay-verType="tips" lay-verify="number" lay-verify="required">-->
<!--                        </script>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
<!--    </fieldset>-->


    <input type="button" lay-submit lay-filter="LAY-pdr-api-edit-submit" value="更新服务接口"
           class="layui-btn layui-btn-fluid">
</div>

<script>
    layui.data.sendParams = function (params) {
        layui.use(['admin', 'form', 'setter'], function () {
            var $ = layui.$
                , admin = layui.admin
                , form = layui.form
                , view = layui.view
                , setter = layui.setter;

            var apiUrl = setter.apiUrl;

            initForm();

            function initForm() {
                console.log(params.queryType);
                $("#queryTypeEdit").val(params.queryType);
                loadProject();
                form.render();
                form.render('select');
            }

            function loadProject() {
                admin.req({
                    url: apiUrl + '/mapi/producer/detail/' + params.pdrProjectId
                    , method: 'get'
                    , done: function (response) {
                        if (response.code === 0) {
                            let project = response.data;
                            let html = "<option value='" + project.id + "'>" + project.name + "</option>";
                            $('#pdrProjectId').append(html);
                            form.render('select');
                        } else {
                            layer.msg(response.msg, {
                                offset: '15px', icon: 2
                            });
                        }
                    }
                });
            };

            $('body').off('click', '.completeIn').on("click", ".completeIn", function () {
                console.log($('#inParam').html());
                var inParams = JSON.parse($('#inParam').html());
                admin.popup({
                    title: '补充入参数据'
                    , area: ['70%', '100%']
                    , id: 'LAY-popup-pdr-api-in-complete'
                    , success: function (layero, index) {
                        view(this.id).render('interface/api/in', inParams).done(function () {
                            form.on('submit(LAY-pdr-api-in-complete-submit)', function (data) {
                                var formData = data.field;
                                var inData = [];
                                console.log(formData.indexArrayStr.length);

                                if (formData.indexArrayStr.length !== 0) {
                                    var indexArray = formData.indexArrayStr.split(',');
                                    if (indexArray.length > 0) {
                                        for (var i = 0; i < indexArray.length; i++) {
                                            let idx = indexArray[i];
                                            let idxName = 'name[' + idx + ']';
                                            let name = formData[idxName];
                                            let idxDesc = 'desc[' + idx + ']';
                                            let desc = formData[idxDesc];
                                            let idxType = 'type[' + idx + ']';
                                            let type = formData[idxType];
                                            var idxRequire = 'require[' + idx + ']';
                                            let require = formData[idxRequire];
                                            var idxExample = 'example[' + idx + ']';
                                            let example = formData[idxExample];
                                            var single = {
                                                name: name,
                                                desc: desc,
                                                type: type,
                                                require: require,
                                                example: example
                                            };
                                            inData.push(single);
                                        }
                                    }
                                }
                                $('#inParam').html(JSON.stringify(inData));
                                layer.close(index);
                            });
                        });
                    }
                });
            });
            $('body').off('click', '.completeOut').on("click", ".completeOut", function () {
                console.log($('#outParam').html());
                var inParams = JSON.parse($('#outParam').html());
                admin.popup({
                    title: '补充出参数据'
                    , area: ['70%', '100%']
                    , id: 'LAY-popup-pdr-api-out-complete'
                    , success: function (layero, index) {
                        view(this.id).render('interface/api/out', inParams).done(function () {
                            form.on('submit(LAY-pdr-api-out-complete-submit)', function (data) {
                                var formData = data.field;
                                var inData = [];

                                console.log(formData.indexArrayStr.length);
                                if (formData.indexArrayStr.length !== 0) {
                                    var indexArray = formData.indexArrayStr.split(',');
                                    if (indexArray.length > 0) {
                                        for (var i = 0; i < indexArray.length; i++) {
                                            let idx = indexArray[i];
                                            let idxName = 'name[' + idx + ']';
                                            let name = formData[idxName];
                                            let idxDesc = 'desc[' + idx + ']';
                                            let desc = formData[idxDesc];
                                            let idxType = 'type[' + idx + ']';
                                            let type = formData[idxType];
                                            var idxExample = 'example[' + idx + ']';
                                            let example = formData[idxExample];
                                            var single = {name: name, desc: desc, type: type, example: example};
                                            inData.push(single);
                                        }
                                    }
                                }
                                $('#outParam').html(JSON.stringify(inData));
                                layer.close(index);
                            });
                        });
                    }
                });
            });

        });
    }
</script>